<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>添加花店销售信息</title>
    <script type="text/javascript" src="../js/calendar/WdatePicker.js"></script>
    <script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        function checkValid(){
            var reg=/^\d+$/;
            var id=document.getElementById("id");

            if(!reg.test(id.value)){
                alert("销售单号不能为空并且只能是数字！");
                id.focus();
                id.select();
                return false;
            }

            var name=document.getElementById("name");
            if(name.value.trim()==""){
                alert("名称不能为空！");
                name.focus();
                return false;
            }

            var sdate=document.getElementById("sdate");
            if(sdate.value.trim()==""){
                alert("销售日期不能为空！");
                sdate.focus();
                return false;
            }

            reg=/^\d+(\.\d{1,2}){0,1}$/;
            var price=document.getElementById("price");

            if(!reg.test(price.value)){
                alert("价格不能为空并且只能是数字！");
                price.focus();
                return false;

            }
            var categoryid=document.getElementById("categoryid");
            if(categoryid.value==0){
                alert("请选择类别！");
                categoryid.focus();
                return false;
            }

            return true;
        }

        function checkPhoto(file) {//图片预览
            var url = null;
            if (window.createObjcectURL != undefined) {
                url = window.createOjcectURL(file);
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file);
            }

            var imgPhoto = document.getElementById("imgPhoto");
            imgPhoto.src = url;
        }

        function checkIdExist(){
            $.ajax( {
                "url": "${pageContext.request.contextPath }/sys/isExistsId", 	  //要请求的URL路径
                "type": "POST",           	                    //发送请求的方式
                "data": "id="+$("#id").val(),
                //要发送到服务器的数据
                "dataType"	: "text",          	                         //指定响应的数据格式
                "success"	: callBack,	       	                   //响应成功后执行的代码
                "error"		: function() {   	                         //请求失败后执行的代码
                    alert("销售单号验证时出现错误，请稍后再试！");
                }
            } );

            // $.post("${pageContext.request.contextPath }/isExistsId","id="+$("#id").val(),callBack);

            //回调函数callBack()中处理服务器响应的关键代码
            // alert("hi");
            function callBack(data) {
                if (data == "true") {
                    $("#divId").html("销售单号已被注册！");
                    $("#divId").css("color","red");
                } else {
                    $("#divId").html("销售单号可以使用！");
                    $("#divId").css("color","green");
                    return true;
                }
            }
        }
    </script>
</head>
<body>

<h2>添加花店销售信息</h2>
<a href="../index.jsp">返回首页</a><br/>
<form action="add" method="post" enctype="multipart/form-data">
    <table>
        <tr>
            <td>销售单号</td>
            <td>
                <input type="text" id="id" name="id" value="${t.id}" onblur="checkIdExist()" />
                <span id="divId" style="color: red;">${error}</span>
            </td>
        </tr>
        <tr>
            <td>名称</td>
            <td><input type="text" id="name" name="name" value="${t.name}" /></td>
        </tr>
        <tr>
            <td>是否收到</td>
            <td>
                <input type="radio" name="isreceived" value="true" ${t.isreceived?"checked='checked'":""} />是
                <input type="radio" name="isreceived" value="false" ${!t.isreceived?"checked='checked'":""} />否
            </td>
        </tr>
        <tr>
            <td>销售日期</td>
            <td>
                <input type="text" Class="Wdate" id="sdate" name="sdate"
                       onclick="WdatePicker();" value="${t.sdate}" />
            </td>
        </tr>
        <tr>
            <td>价格</td>
            <td>
                <input type="text" id="price" name="price" value="${t.price}" />
            </td>
        </tr>
        <tr>
            <td>照片</td>
            <td>
                <input type="file" name="photo" id="photo" onchange="checkPhoto(this.files[0])" />
                <img width="120px" height="180px" name="imgPhoto" id="imgPhoto" />
            </td>
        </tr>
        <tr>
            <td>类别</td>
            <td>
                <select id="categoryid" name="categoryid">

                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <input type="submit" name="btnSubmit" value="添加花店销售" onclick="return checkValid()" />
            </td>
        </tr>
    </table>
</form>
</body>
<script type="text/javascript">
    function initList(pageIndex){
        // alert("hi");
        // $.json()方法
        $.getJSON("${pageContext.request.contextPath }/sys/listprovince",null,processList);
    }

    function processList(data) {
        // alert(data);
        $("#categoryid").empty();
        $("#categoryid").append("<option value='0'>请选择...</option>");
        $(data).each(function () {
            var optionValue = "<option value='" + this.id + "'>" + this.name + "</option>";
            $("#categoryid").append(optionValue);
            // alert(strInfo);
        });
    }

    $(document).ready(function () {
        initList();
    });
</script>
</html>
